<template>
  <div class="career-life">
    <!-- 顶部工具栏：返回首页 -->
    <div class="panel">
      <div class="p-title">
        <div class="page-title">求职生活</div>
        <div class="header-tools">
          <div class="spacer"></div>
          <el-button class="btn-outline" @click="goHome">返回首页</el-button>
        </div>
      </div>
    </div>
    <!-- 模块一：职业发展路径 -->
    <div class="panel">
      <div class="p-title">职业发展路径</div>
      <div class="p-content">
        <div class="filters persona-row">
          <div class="persona-chips">
            <button
              v-for="p in personas"
              :key="p.value"
              :class="['persona-chip', { active: persona === p.value }]"
              @click="persona = p.value"
            >
              {{ p.label }}
            </button>
          </div>
        </div>
        <div class="path-grid">
          <div class="path-card" v-for="(p,idx) in careerPaths" :key="idx">
            <div class="path-title">{{ p.title }}</div>
            <div class="path-steps">
              <div class="step" v-for="(s,i) in p.steps" :key="i">
                <div class="step-name">{{ s.name }}</div>
                <div class="step-meta">
                  <span class="salary">薪资：{{ s.salary }}</span>
                  <span class="skills">核心技能：{{ s.skills.join('、') }}</span>
                </div>
              </div>
            </div>
            <div class="path-notes" v-if="p.notes">{{ p.notes }}</div>
          </div>
        </div>
        <div class="charts-row">
          <div class="chart" ref="pathChart"></div>
          <div class="chart" ref="transferChart"></div>
        </div>
        <div class="x-transfer">
          <div class="x-title">跨岗转型可行性</div>
          <div class="x-cases">
            <div class="x-card" v-for="(c,idx) in crossCases" :key="idx">
              <div class="x-from">{{ c.from }} => {{ c.to }}</div>
              <div class="x-score">可行性：<b>{{ c.feasibility }}</b></div>
              <div class="x-steps">关键补齐：{{ c.bridgeSkills.join('、') }}</div>
              <div class="x-notes" v-if="c.notes">{{ c.notes }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模块二：求职生活成本对比 -->
    <div class="panel">
      <div class="p-title">求职生活成本对比</div>
      <div class="p-content">
        <div class="filters">
          <el-select v-model="cityA" placeholder="城市 A" class="w-160">
            <el-option v-for="c in cities" :key="c" :label="c" :value="c" />
          </el-select>
          <el-select v-model="cityB" placeholder="城市 B" class="w-160">
            <el-option v-for="c in cities" :key="c" :label="c" :value="c" />
          </el-select>
        </div>

        <div class="compare-grid">
          <div class="compare-card" v-for="(row,idx) in comparedCosts" :key="idx">
            <div class="row-title">{{ row.title }}</div>
            <table class="compare-table">
              <thead>
                <tr>
                  <th>{{ cityA }}</th>
                  <th>{{ cityB }}</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <ul>
                      <li v-for="(t,i) in row.cityA" :key="i">{{ t }}</li>
                    </ul>
                  </td>
                  <td>
                    <ul>
                      <li v-for="(t,i) in row.cityB" :key="i">{{ t }}</li>
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="charts-row">
          <div class="chart" ref="costStackChart"></div>
          <div class="chart" ref="radarChart"></div>
        </div>

        
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'CareerLife',
  data(){
    return {
      cities: ['北京','上海','广州','深圳','杭州','成都','重庆','武汉','西安'],
      cityA: '北京',
      cityB: '成都',
      personas: [
        { label: '应届生', value: 'graduate' },
        { label: '职场跳槽者', value: 'job-hopper' },
        { label: '跨城求职者', value: 'city-mover' },
        { label: '自由职业/远程', value: 'freelancer' }
      ],
      persona: 'graduate',
      // 不同人群的模拟数据集合
      careerPresets: {
        'graduate': {
      careerPaths: [
        {
          title: '前端工程师 -> 高级 -> 全栈 -> 架构师',
          steps: [
            { name: '初级前端', salary: '8k-15k', skills: ['HTML/CSS','Vue/React','基础工程化'] },
            { name: '高级前端', salary: '18k-30k', skills: ['性能优化','工程化/CI','组件设计'] },
            { name: '全栈工程师', salary: '22k-35k', skills: ['Node.js','数据库','服务端渲染'] },
            { name: '架构师', salary: '30k-50k+', skills: ['架构设计','服务治理','可观测性'] }
              ]
        },
        {
              title: '后端工程师 -> 高级 -> 技术负责人 -> 架构师',
          steps: [
            { name: '初级后端', salary: '9k-16k', skills: ['Java/Python','SQL','基础中间件'] },
            { name: '高级后端', salary: '20k-35k', skills: ['微服务','缓存/消息队列','性能优化'] },
                { name: '技术负责人', salary: '35k-60k+', skills: ['系统架构','项目管理','团队协作'] },
                { name: '架构师', salary: '40k-65k+', skills: ['分布式','稳定性治理','平台化'] }
          ]
        }
      ],
      crossCases: [
        { from: '前端', to: '全栈', feasibility: '高', score: 85, bridgeSkills: ['Node.js','数据库','接口设计'] },
        { from: '全栈', to: '架构师', feasibility: '中', score: 65, bridgeSkills: ['分布式','可观测性','DevOps'] },
        { from: '测试', to: '后端', feasibility: '中', score: 60, bridgeSkills: ['Java/Python','数据库','算法与数据结构'] }
      ],
          salaryProgression: { front: [12,24,30,45], back: [13,26,38,50], data: [10,20,28,36] }
        },
        'job-hopper': {
          careerPaths: [
            {
              title: '后端高级 -> 技术专家 -> 技术负责人 -> 技术总监',
              steps: [
                { name: '高级后端', salary: '25k-35k', skills: ['微服务','中间件','性能优化'] },
                { name: '技术专家', salary: '30k-45k', skills: ['架构演进','稳定性','数据库治理'] },
                { name: '技术负责人', salary: '40k-60k', skills: ['项目管理','团队管理','架构决策'] },
                { name: '技术总监', salary: '60k-90k', skills: ['组织架构','战略规划','成本控制'] }
              ]
            },
            {
              title: '前端高级 -> 全栈 -> 架构师 -> 技术负责人',
              steps: [
                { name: '高级前端', salary: '22k-32k', skills: ['工程化','低代码','性能治理'] },
                { name: '全栈工程师', salary: '26k-38k', skills: ['Node.js','云原生','数据库'] },
                { name: '架构师', salary: '35k-55k', skills: ['架构设计','稳定性','可观测性'] },
                { name: '技术负责人', salary: '45k-70k', skills: ['项目管理','业务抽象','跨团队协作'] }
              ]
            }
          ],
          crossCases: [
            { from: '测试', to: '后端', feasibility: '中', score: 68, bridgeSkills: ['Java','SQL','微服务'] },
            { from: '前端', to: '数据工程', feasibility: '中', score: 62, bridgeSkills: ['Python','数据建模','ETL'] },
            { from: '运维', to: 'SRE', feasibility: '高', score: 78, bridgeSkills: ['自动化','可观测性','容量管理'] }
          ],
          salaryProgression: { front: [18,28,36,48], back: [20,32,42,55], data: [14,24,32,44] }
        },
        'city-mover': {
          careerPaths: [
            {
              title: '全栈 -> 业务主程 -> 技术负责人',
              steps: [
                { name: '全栈工程师', salary: '16k-26k', skills: ['前后端联调','接口设计','数据库'] },
                { name: '业务主程', salary: '22k-32k', skills: ['需求分析','交付管理','系统拆解'] },
                { name: '技术负责人', salary: '30k-45k', skills: ['团队管理','架构优化','故障应急'] }
              ]
            },
            {
              title: '数据开发 -> 数据平台 -> 数据架构',
              steps: [
                { name: '数据开发', salary: '14k-22k', skills: ['SQL','数仓建模','ETL'] },
                { name: '数据平台', salary: '22k-30k', skills: ['调度系统','指标治理','数据质量'] },
                { name: '数据架构', salary: '30k-45k', skills: ['湖仓一体','权限与安全','成本优化'] }
              ]
            }
          ],
          crossCases: [
            { from: '后端', to: '全栈', feasibility: '高', score: 80, bridgeSkills: ['Node.js','前端工程化','部署与运维'] },
            { from: '前端', to: '移动端', feasibility: '中', score: 60, bridgeSkills: ['Flutter/React Native','移动端调优'] }
          ],
          salaryProgression: { front: [10,20,26,38], back: [12,22,30,40], data: [9,18,24,34] }
        },
        'freelancer': {
          careerPaths: [
            {
              title: '自由职业前端 -> 接外包 -> 技术顾问',
              steps: [
                { name: '自由职业前端', salary: '按单结算', skills: ['快速交付','组件库','动画与可视化'] },
                { name: '外包项目负责人', salary: '20k-30k', skills: ['需求拆解','交付控制','跨时区沟通'] },
                { name: '技术顾问', salary: '30k-45k', skills: ['架构选型','成本优化','团队培训'] }
              ]
            },
            {
              title: '远程后端 -> 平台工程 -> 架构顾问',
              steps: [
                { name: '远程后端', salary: '20k-35k', skills: ['异步协作','DevOps','SaaS集成'] },
                { name: '平台工程', salary: '28k-40k', skills: ['内核抽象','CI/CD','可观测性'] },
                { name: '架构顾问', salary: '40k-60k', skills: ['服务治理','云成本','稳定性'] }
              ]
            }
          ],
          crossCases: [
            { from: '前端', to: '可视化工程', feasibility: '高', score: 82, bridgeSkills: ['ECharts/D3','WebGL','工程化'] },
            { from: '后端', to: '平台工程', feasibility: '高', score: 80, bridgeSkills: ['容器化','CICD','基础设施即代码'] }
          ],
          salaryProgression: { front: [16,26,34,46], back: [15,28,38,50], data: [18,26,34,48] }
        }
      },
      // 图表实例
      chartInstances: {
        path: null,
        transfer: null,
        costStack: null,
        radar: null
      }
    }
  },
  computed: {
    // 根据不同人群返回不同的路径/案例/薪资数据
    careerPaths(){
      return (this.careerPresets[this.persona] || this.careerPresets['graduate']).careerPaths
    },
    crossCases(){
      return (this.careerPresets[this.persona] || this.careerPresets['graduate']).crossCases
    },
    salaryProgression(){
      return (this.careerPresets[this.persona] || this.careerPresets['graduate']).salaryProgression
    },
    comparedCosts(){
      // 根据 persona + 城市生成差异化的文本与数值（城市维度更丰富）
      const seed = this.cityA + this.cityB + this.persona
      const baseRand = seed.split('').reduce((a, b) => a + b.charCodeAt(0), 0)
      const rnd = (min, max, k=0)=>{
        const x = Math.sin(baseRand * 1.37 + k) * 0.5 + 0.5
        return Math.floor(x * (max - min) + min)
      }
      const pick = (arr, k=0)=> arr[Math.abs(rnd(0, arr.length, k)) % arr.length]

      // 城市画像库：区域/美食/通勤与政策关键词
      const cityProfiles = {
        '北京': { areas:['中关村','望京','亦庄','通州北关'], foods:['涮肉','炸酱面','卤煮'], commute:['环线换乘密集','快速公交/地铁并行'], policy:['中关村人才计划','亦庄新政'] },
        '上海': { areas:['浦东张江','徐汇','虹桥','漕河泾'], foods:['本帮菜','小笼','生煎'], commute:['地铁密度全国最高','有轨电车+地铁'], policy:['临港人才政策','张江高科补贴'] },
        '广州': { areas:['珠江新城','天河','科学城'], foods:['早茶','肠粉','烧腊'], commute:['地铁覆盖扎实','城际交通便利'], policy:['广深港合作计划','人才绿卡'] },
        '深圳': { areas:['南山科技园','前海','宝中'], foods:['潮汕牛肉火锅','沙井生蚝'], commute:['地铁+深中通道发展','共享出行便捷'], policy:['孔雀计划','深港科创圈'] },
        '杭州': { areas:['滨江','未来科技城','城西科创大走廊'], foods:['杭帮菜','葱包桧','小笼南宋风'], commute:['地铁+快速公交','骑行友好城市'], policy:['5050 计划','人才租补'] },
        '成都': { areas:['高新区','天府新区','软件园'], foods:['火锅','冒菜','串串'], commute:['地铁新线密集开通','共享单车便宜'], policy:['蓉漂计划','科创券'] },
        '重庆': { areas:['渝中解放碑','两江新区','礼嘉智慧公园'], foods:['小面','火锅','酸辣粉'], commute:['地铁/轻轨多山城市','索道/爬坡交通'], policy:['两江新区人才补贴'] },
        '武汉': { areas:['光谷','汉口','汉阳'], foods:['热干面','鸭脖','糯米鸡'], commute:['地铁分布三镇','过江通勤'], policy:['百万大学生留汉计划'] },
        '西安': { areas:['高新区','曲江','经开区'], foods:['肉夹馍','凉皮','Biangbiang 面'], commute:['地铁放射+环线','共享电单车'], policy:['西咸新区人才计划'] },
        '长沙': { areas:['梅溪湖','高新区','星沙'], foods:['口味虾','米粉','茶颜悦色'], commute:['地铁+磁浮','公交便利'], policy:['海纳英才计划'] },
        '郑州': { areas:['高新区','金融岛','龙子湖'], foods:['烩面','胡辣汤','烧烤'], commute:['地铁骨架完善','城郊快线'], policy:['黄河人才计划'] },
        '长春': { areas:['汽开区','高新区','净月'], foods:['锅包肉','麻辣拌'], commute:['地铁+轻轨','公交发达'], policy:['长春英才计划'] },
        '贵阳': { areas:['观山湖','高新区','金融城'], foods:['丝娃娃','恋爱豆腐果'], commute:['地铁在建+公交便捷'], policy:['贵阳人才新政'] },
        '宁波': { areas:['鄞州','北仑','东部新城'], foods:['海鲜','汤圆'], commute:['地铁+BRT','通勤顺畅'], policy:['甬江科创大走廊'] }
      }

      const makeCity = (city, persona, salt=0)=>{
        const prof = cityProfiles[city] || { areas:['核心区','近郊'], foods:['地方菜'], commute:['地铁/公交'], policy:['人才补贴'] }
        const area = pick(prof.areas, 10+salt)
        const food = pick(prof.foods, 20+salt)
        const commuteKw = pick(prof.commute, 30+salt)
        const pol = pick(prof.policy, 40+salt)
        // 文案根据 persona 微调语气
        const focus = {
          graduate: ['应届租住更偏向合租与近校','校招/实习机会多','学习与成长氛围浓'],
          'job-hopper': ['商务餐与社交成本占比上升','职位密度高，窗口期短','稳定性与成长同等重要'],
          'city-mover': ['过渡租房与通勤成本敏感','城市熟悉成本需要时间','社交网络重建'],
          freelancer: ['差旅/设备/订阅是主要开支','共享办公与灵活通勤更友好','客户获取渠道重要']
        }[persona] || []

        const base = [
          `住房：${area} 区域租住 ${rnd(1800, 6200, 1+salt)}-${rnd(2400, 8800, 2+salt)} 元/月，${pick(['整租','合租','公寓','长租公寓'], 3+salt)}可选`,
          `餐饮：本地 ${food}、${pick(prof.foods, 5+salt)} 人均 ${rnd(22, 68, 6+salt)}-${rnd(38, 98, 7+salt)} 元；${pick(['夜宵丰富','外卖选择多','自炊友好'], 8+salt)}`,
          `通勤：${commuteKw}，月均交通 ${rnd(70, 320, 9+salt)} 元`
        ]
        const hidden = [
          `${pick(['岗位密度','面试轮次','试用期要求'], 11+salt)}：${pick(['较高','中等','相对友好'], 12+salt)}；${pick(focus, 13+salt) || '注意节奏与规划'}`,
          `机会成本：热门赛道竞争激烈，平均面试周期 ${rnd(2, 7, 14+salt)} 周`,
          `生活便利：${pick(['医疗教育资源集中','商业配套完善','节假日景点拥挤'], 15+salt)}`
        ]
        const policy = [
          `人才政策：${pol}，${pick(['落户/购房有加分','补贴覆盖但审核严格','新政窗口期关注官方渠道'], 16+salt)}`,
          `住房福利：${pick(['人才公寓可申请','园区公寓名额稳定','共有产权房摇号周期较长'], 17+salt)}`,
          `产业：${pick(['数字经济','制造业','外贸航运','文旅会展','电子信息'], 18+salt)} 带动岗位增量`
        ]
        return { base, hidden, policy }
      }

      // 再叠加 persona 的共性修饰（保留已有预设）
      const presets = {
        graduate: {
          baseA: [
            `住房：近学校地段合租 ${rnd(2600, 3300,1)} 元/月，季付压力中等`,
            `餐饮：校区外快餐 ${rnd(22, 35,2)}-${rnd(32, 46,3)} 元，社交聚餐 ${rnd(65, 89,4)}+`,
            `通勤：公共交通为主，月均 ${rnd(120, 180,5)} 元`
          ],
          baseB: [
            `住房：地铁沿线合租 ${rnd(1600, 2400,6)}-${rnd(2100, 2800,7)} 元，通勤 ${rnd(25, 55,8)} 分钟`,
            `餐饮：简餐 ${rnd(18, 28,9)}-${rnd(24, 34,10)} 元，自炊比例更高`,
            `通勤：公交/单车，月均 ${rnd(80, 120,11)} 元`
          ],
          hiddenA: [
            '求职成本：简历辅导/面试交通支出偏高',
            `竞争强度：同岗位投递量大，平均面试周期 ${rnd(2, 5,12)} 周`,
            '成长红利：大厂培训体系完善，节奏更快'
          ],
          hiddenB: [
            '求职成本：线下机会更分散，但性价比高',
            `竞争强度：投递量较小，平均面试周期 ${rnd(2, 6,13)} 周`,
            '成长红利：早期承担多角色，综合能力提升快'
          ],
          policyA: ['租房补贴：覆盖少，门槛较高', '人才公寓：排队时间长', '实习岗位：数量多，要求高'],
          policyB: ['租房补贴：更易申请', '人才公寓：供给稳定', '实习岗位：与本地产业高度相关']
        },
        'job-hopper': {
          baseA: [
            `住房：核心商圈整租 ${rnd(4800, 6500,21)} 元/月，上下班 30 分钟内`,
            `餐饮：商务简餐 ${rnd(45, 68,22)}-${rnd(60, 88,23)} 元，客户餐叠加`,
            `通勤：地铁/打车混合，月均 ${rnd(220, 360,24)} 元`
          ],
          baseB: [
            `住房：新兴园区整租 ${rnd(2600, 3600,25)}-${rnd(3200, 4500,26)} 元`,
            `餐饮：园区餐厅 ${rnd(26, 42,27)}-${rnd(40, 58,28)} 元`,
            `通勤：自驾/地铁，月均 ${rnd(160, 240,29)} 元`
          ],
          hiddenA: ['培训与证书：体系化投入', '机会成本：转换期工资折扣', '家庭成本：育儿/教育支出高'],
          hiddenB: ['培训与证书：定向投入', '机会成本：岗位密度较低', '家庭成本：稳定且较低'],
          policyA: ['人才引进：积分落户/购房资格', '创新券/专项基金覆盖度高', '岗位密度高，换岗窗口短'],
          policyB: ['安家补贴/购房补贴', '园区人才绿卡', '招商引资带来职位增量']
        },
        'city-mover': {
          baseA: [
            `住房：核心区过渡合租 ${rnd(3200, 4200,31)} 元/月，短租溢价`,
            `餐饮：外卖为主 ${rnd(32, 48,32)}-${rnd(45, 60,33)} 元`,
            `通勤：跨区地铁 ${rnd(180, 260,34)} 元/月`
          ],
          baseB: [
            `住房：近地铁整租 ${rnd(2000, 3000,35)}-${rnd(2600, 3600,36)} 元`,
            `餐饮：本地小吃 ${rnd(16, 28,37)}-${rnd(24, 36,38)} 元`,
            `通勤：骑行/公交，月均 ${rnd(70, 110,39)} 元`
          ],
          hiddenA: ['社交网络：重建成本高', '搬迁成本：打包运输/中介费', '心理成本：节奏切换适应期'],
          hiddenB: ['社交网络：社区友好', '搬迁成本：本地资源获取快', '心理成本：节奏更舒缓'],
          policyA: ['人才引入窗口期政策', '租房补贴但竞争激烈', '交通通勤优惠活动多'],
          policyB: ['落户政策更友好', '租房与生活补贴力度更大', '引才专项岗位定向投放']
        },
        freelancer: {
          baseA: [
            `住房：市中心工位/公寓 ${rnd(1200, 2200,41)}-${rnd(3200, 5200,42)} 元/月`,
            `餐饮：差旅占比高，单次 ${rnd(60, 120,43)}+ 元`,
            `通勤：异地差旅为主，月均 ${rnd(600, 1200,44)} 元`
          ],
          baseB: [
            `住房：共享办公/近郊公寓 ${rnd(800, 1400,45)}-${rnd(1600, 2600,46)} 元/月`,
            `餐饮：自炊比例高，采购成本低`,
            `通勤：本地出行为主，月均 ${rnd(60, 160,47)} 元`
          ],
          hiddenA: ['客户开发成本高', '现金流波动，需要预留备用金', '设备/订阅长期成本'],
          hiddenB: ['本地客户稳定', '现金流平滑', '设备与订阅成本较低'],
          policyA: ['创新券/开票便利', '创业赛事/孵化器资源多', '跨城合作机会多'],
          policyB: ['个体户税收优惠', '园区创业补贴', '数字游民友好政策']
        }
      }

      const p = presets[this.persona] || presets.graduate
      // 基于城市画像生成的文本
      const cityASec = makeCity(this.cityA, this.persona, 101)
      const cityBSec = makeCity(this.cityB, this.persona, 202)

      // 将城市个性 + 人群共性融合，优先展示城市差异文本，后面补充人群共性一两条
      const merge = (cityArr, personaArr)=>{
        const out = [...cityArr]
        if (personaArr && personaArr.length){ out.push(personaArr[0]) }
        return out.slice(0, 3)
      }

      return [
        { title:'基础生存成本', cityA: merge(cityASec.base, p.baseA), cityB: merge(cityBSec.base, p.baseB) },
        { title:'隐性/长期成本', cityA: merge(cityASec.hidden, p.hiddenA), cityB: merge(cityBSec.hidden, p.hiddenB) },
        { title:'政策与福利加分项', cityA: merge(cityASec.policy, p.policyA), cityB: merge(cityBSec.policy, p.policyB) }
      ]
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.initPathChart()
      this.initTransferChart()
      this.initCostStackChart()
      this.initRadarChart()
      window.addEventListener('resize', this.onResize)
    })
  },
  beforeUnmount(){
    window.removeEventListener('resize', this.onResize)
    Object.values(this.chartInstances || {}).forEach(inst=>{ try{ inst && inst.dispose() }catch(e){} })
  },
  watch: {
    cityA(){ this.refreshCharts() },
    cityB(){ this.refreshCharts() },
    persona(){ this.refreshCharts() }
  },
  methods: {
    goHome(){
      this.$router.push({ name: 'Home' })
    },
    onResize(){
      Object.values(this.chartInstances || {}).forEach(inst=>{ try{ inst && inst.resize() }catch(e){} })
    },
    refreshCharts(){
      this.updatePathChart()
      this.updateTransferChart()
      this.updateCostStackChart()
      this.updateRadarChart()
    },
    initPathChart(){
      const el = this.$refs.pathChart
      if (!el) return
      this.chartInstances.path = echarts.init(el)
      this.updatePathChart()
    },
    updatePathChart(){
      const inst = this.chartInstances.path
      if(!inst) return
      const categories = ['初级','高级','全栈','架构']
      const opt = {
        backgroundColor: 'transparent',
        grid: { left: 40, right: 20, top: 30, bottom: 30 },
        tooltip: { trigger: 'axis' },
        legend: { data: ['前端路线','后端路线','数据路线'], textStyle: { color: '#cfe2ff' } },
        xAxis: { type: 'category', data: categories, axisLabel: { color: '#cfe2ff' }, axisLine:{ lineStyle:{ color:'#63a2ff33' } } },
        yAxis: { type: 'value', name: 'k/月', axisLabel:{ color:'#cfe2ff' }, splitLine:{ lineStyle:{ color:'#63a2ff22' }} },
        series: [
          { name:'前端路线', type:'line', smooth:true, data: this.salaryProgression.front, areaStyle:{ opacity:.1 } },
          { name:'后端路线', type:'line', smooth:true, data: this.salaryProgression.back, areaStyle:{ opacity:.1 } },
          { name:'数据路线', type:'line', smooth:true, data: this.salaryProgression.data, areaStyle:{ opacity:.1 } }
        ]
      }
      inst.setOption(opt)
    },
    initTransferChart(){
      const el = this.$refs.transferChart
      if (!el) return
      this.chartInstances.transfer = echarts.init(el)
      this.updateTransferChart()
    },
    updateTransferChart(){
      const inst = this.chartInstances.transfer
      if(!inst) return
      const names = this.crossCases.map(x=>`${x.from}→${x.to}`)
      const scores = this.crossCases.map(x=>x.score)
      const opt = {
        backgroundColor: 'transparent',
        grid: { left: 80, right: 20, top: 20, bottom: 30 },
        tooltip: {},
        xAxis: { type:'value', max:100, axisLabel:{ color:'#cfe2ff' }, splitLine:{ lineStyle:{ color:'#63a2ff22' }} },
        yAxis: { type:'category', data:names, axisLabel:{ color:'#cfe2ff' }, axisLine:{ lineStyle:{ color:'#63a2ff33' } } },
        series: [{
          type:'bar', data:scores,
          itemStyle:{ color:'#63a2ff' },
          label:{ show:true, position:'right', color:'#cfe2ff' }
        }]
      }
      inst.setOption(opt)
    },
    initCostStackChart(){
      const el = this.$refs.costStackChart
      if (!el) return
      this.chartInstances.costStack = echarts.init(el)
      this.updateCostStackChart()
    },
    updateCostStackChart(){
      const inst = this.chartInstances.costStack
      if(!inst) return
      // 基于 persona 粗略切换占比
      const factors = {
        graduate: { rent:[40,28], food:[25,22], commute:[15,12], prep:[8,6], transit:[6,5], hidden:[6,7] },
        'job-hopper': { rent:[35,26], food:[22,20], commute:[18,14], prep:[10,8], transit:[7,6], hidden:[8,9] },
        'city-mover': { rent:[42,30], food:[23,20], commute:[16,14], prep:[10,8], transit:[7,7], hidden:[7,8] },
        freelancer: { rent:[30,22], food:[20,18], commute:[8,6], prep:[8,7], transit:[6,5], hidden:[28,32] }
      }[this.persona] || {
        rent:[35,26], food:[22,20], commute:[16,14], prep:[9,7], transit:[7,6], hidden:[11,13]
      }
      const cats = ['住房','餐饮','通勤','准备','过渡','隐性']
      const opt = {
        backgroundColor:'transparent',
        tooltip:{ trigger:'axis', axisPointer:{ type:'shadow' } },
        legend:{ data:[this.cityA, this.cityB], textStyle:{ color:'#cfe2ff' } },
        grid:{ left:40, right:20, top:30, bottom:30 },
        xAxis:{ type:'category', data:cats, axisLabel:{ color:'#cfe2ff' }, axisLine:{ lineStyle:{ color:'#63a2ff33' } } },
        yAxis:{ type:'value', name:'占比(%)', axisLabel:{ color:'#cfe2ff' }, splitLine:{ lineStyle:{ color:'#63a2ff22' } } },
        series:[
          { name:this.cityA, type:'bar', stack:'cost', data:[factors.rent[0],factors.food[0],factors.commute[0],factors.prep[0],factors.transit[0],factors.hidden[0]], itemStyle:{ color:'#9fd0ff' } },
          { name:this.cityB, type:'bar', stack:'cost', data:[factors.rent[1],factors.food[1],factors.commute[1],factors.prep[1],factors.transit[1],factors.hidden[1]], itemStyle:{ color:'#63a2ff' } }
        ]
      }
      inst.setOption(opt)
    },
    initRadarChart(){
      const el = this.$refs.radarChart
      if (!el) return
      this.chartInstances.radar = echarts.init(el)
      this.updateRadarChart()
    },
    updateRadarChart(){
      const inst = this.chartInstances.radar
      if(!inst) return
      // 雷达维度：岗位数量、成本友好、通勤便捷、政策福利、成长空间
      const indicators = [
        { name:'岗位数量', max: 100 },
        { name:'成本友好', max: 100 },
        { name:'通勤便捷', max: 100 },
        { name:'政策福利', max: 100 },
        { name:'成长空间', max: 100 }
      ]
      const presets = {
        北京: [95, 55, 85, 70, 92],
        上海: [92, 58, 88, 75, 90],
        广州: [80, 70, 82, 68, 78],
        深圳: [90, 60, 84, 72, 88],
        杭州: [85, 66, 80, 78, 86],
        成都: [70, 78, 76, 72, 74],
        重庆: [65, 80, 70, 68, 70],
        武汉: [68, 76, 72, 66, 72],
        西安: [60, 82, 70, 64, 68]
      }
      const a = presets[this.cityA] || [70,70,70,70,70]
      const b = presets[this.cityB] || [70,70,70,70,70]
      const opt = {
        backgroundColor:'transparent',
        tooltip:{},
        legend:{ 
          data:[this.cityA, this.cityB], 
          textStyle:{ color:'#cfe2ff' },
          itemGap: 20,
          left: 'center',
          top: 'top',
          orient: 'horizontal'
        },
        radar:{ 
          indicator: indicators, 
          name:{ textStyle:{ color:'#cfe2ff' } }, 
          splitLine:{ lineStyle:{ color:'#63a2ff22' } }, 
          splitArea:{ areaStyle:{ opacity:0 } }, 
          axisLine:{ lineStyle:{ color:'#63a2ff33' } },
          center: ['50%', '55%'],
          radius: '60%'
        },
        series:[{
          type:'radar',
          data:[
            { value: a, name: this.cityA, areaStyle:{ opacity:.15 }, lineStyle:{ color:'#9fd0ff' }, itemStyle:{ color:'#9fd0ff' } },
            { value: b, name: this.cityB, areaStyle:{ opacity:.15 }, lineStyle:{ color:'#63a2ff' }, itemStyle:{ color:'#63a2ff' } }
          ]
        }]
      }
      inst.setOption(opt)
    }
  }
}
</script>

<style scoped>
.career-life{ padding: 0.3rem; color:#fff; background: linear-gradient(180deg, rgba(1,14,80,.85), rgba(1,14,80,.95)), url(@/assets/images/bg.jpg) center top no-repeat; background-size: cover; min-height:100vh; display:grid; grid-template-rows:auto auto; grid-template-columns:1fr; gap:0.3rem }
.panel{ border: 1px solid rgba(100, 162, 255, .25); position: relative; background: rgba(0, 35, 120, .36); display:flex; flex-direction:column; backdrop-filter: blur(4px) }
.panel:after, .panel:before { position: absolute; content: ""; width: 20px; height: 30px }
.panel:before { border-left: 1px solid #0258f0; border-top: 1px solid #0258f0; left: -1px; top: -1px }
.panel:after { border-right: 1px solid #0258f0; border-bottom: 1px solid #0258f0; right: -1px; bottom: -1px }
.p-title{ height: 30px; font-size: 16px; line-height: 10px; width:100%; font-weight:600; padding: 0 15px; position:relative; display:flex; justify-content:space-between; align-items:center; letter-spacing:.5px }
.p-title:after{ position:absolute; content:""; width:20%; height:1px; background:#0258f0; left:5%; opacity:.4; bottom:0 }
.page-title:after{ display: none }
.p-content{ flex-grow:1; margin: 0.2rem; position:relative; overflow:auto; max-height: 420px }
.w-160{ width:160px }
.w-200{ width:200px }

/* 职业路径 */
.path-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px }
.path-card{ border:1px solid rgba(100,162,255,.25); border-radius:8px; padding:12px; background: radial-gradient(120% 120% at 0% 0%, rgba(10,40,120,.35), rgba(0,35,120,.2)); display:flex; flex-direction:column; gap:10px }
.path-title{ font-weight:700; font-size:15px }
.path-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px }
.step{ border:1px dashed rgba(100,162,255,.35); border-radius:8px; padding:10px; background: rgba(255,255,255,.04) }
.step-name{ font-weight:600 }
.step-meta{ color:#cfe2ff; font-size:12px; margin-top:6px; display:flex; flex-direction:column; gap:4px }
.path-notes{ color:#cfe2ff }

.charts-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 10px }
.chart{ width:100%; height: 280px; border:1px solid rgba(100,162,255,.25); border-radius:8px; background: rgba(255,255,255,.02) }

.x-transfer{ margin-top:12px }
.x-title{ font-weight:700; margin-bottom:8px }
.x-cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }
.x-card{ border:1px solid rgba(100,162,255,.25); border-radius:8px; padding:12px; background: rgba(255,255,255,.04) }
.x-from{ font-weight:600 }
.x-score{ color:#9fd0ff; margin:6px 0 }
.x-steps{ color:#cfe2ff; font-size:12px }

/* 成本对比 */
.filters{ display:flex; gap:12px; margin-bottom:10px }
.persona-row{ justify-content:flex-start }
.persona-chips{ display:flex; gap:10px; flex-wrap:wrap }
.persona-chip{ height:28px; padding:0 12px; border:1px solid rgba(100,162,255,.6); background:rgba(255,255,255,.06); color:#dbeafe; cursor:pointer; border-radius:0 }
.persona-chip:hover{ background: rgba(2,88,240,.15); border-color:#63a2ff; color:#fff }
.persona-chip.active{ background: rgba(2,88,240,.15); border-color:#63a2ff; color:#fff }
.compare-grid{ display:grid; grid-template-columns: 1fr; gap:12px }
.compare-card{ border:1px solid rgba(100,162,255,.25); border-radius:8px; padding:12px; background: rgba(255,255,255,.04) }
.row-title{ font-weight:700; margin-bottom:8px }
.compare-table{ width:100%; border-collapse: separate; border-spacing: 0; overflow:hidden; border-radius:8px; border:1px solid rgba(100,162,255,.25) }
.compare-table thead th{ background: rgba(2,88,240,.15); color:#fff; padding:10px 12px; text-align:left; border-bottom:1px solid rgba(100,162,255,.25) }
.compare-table tbody td{ vertical-align: top; padding:10px 12px; color:#dbeafe }
.compare-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02) }
.compare-table ul{ margin:0; padding-left: 16px }
.compare-table li{ line-height: 1.7 }

/* 下拉框风格与项目适配 */
.career-life :deep(.el-select .el-input__wrapper){
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(100,162,255,.6);
  box-shadow: none;
}
.career-life :deep(.el-select .el-input__wrapper.is-focus),
.career-life :deep(.el-select .el-input__wrapper:hover){
  background: rgba(2,88,240,.15);
  border-color: #63a2ff;
}
.career-life :deep(.el-select .el-input__inner){
  color: #dbeafe;
}
.career-life :deep(.el-select .el-select__caret){
  color: #cfe2ff;
}
.career-life :deep(.el-select-dropdown){
  background: rgba(0, 35, 120, .96);
  border: 1px solid rgba(100,162,255,.25);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(2,88,240,.18);
}
.career-life :deep(.el-select-dropdown__item){
  color: #dbeafe;
  padding: 8px 12px;
}
.career-life :deep(.el-select-dropdown__item.hover),
.career-life :deep(.el-select-dropdown__item.selected){
  background: rgba(2,88,240,.15);
  color: #fff;
}
.career-life :deep(.el-select-dropdown__item.is-disabled){
  opacity: .6;
}
.career-life :deep(.el-select-dropdown__wrap){
  max-height: 260px;
}
.career-life :deep(.el-select__popper){
  border: 1px solid rgba(100,162,255,.25);
  box-shadow: 0 10px 24px rgba(2,88,240,.18);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

@media (max-width: 1200px){
  .path-steps{ grid-template-columns: repeat(2, 1fr) }
  .x-cases{ grid-template-columns: repeat(2, 1fr) }
  .charts-row{ grid-template-columns: 1fr }
}
@media (max-width: 768px){
  .path-grid{ grid-template-columns: 1fr }
  .row-items{ grid-template-columns: 1fr }
  .x-cases{ grid-template-columns: 1fr }
  .chart{ height: 240px }
  .p-content{ max-height: 360px }
}

/* 顶部工具栏与按钮样式 */
.header-tools{ display:flex; align-items:center; gap:12px; width:100% }
.header-tools .spacer{ flex:1 1 auto }
.btn-outline{ background: transparent; border:1px solid rgba(100,162,255,.6); color:#cfe2ff }
.btn-outline:hover{ background: rgba(2,88,240,.15); border-color:#63a2ff; color:#fff }

/* 页面大标题 */
.page-title{ font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,.25); white-space: nowrap }

/* 自定义滚动条，适配项目视觉 */
.career-life :deep(::-webkit-scrollbar){ width: 8px; height: 8px }
.career-life :deep(::-webkit-scrollbar-track){ background: rgba(255,255,255,0.06); border-radius: 8px }
.career-life :deep(::-webkit-scrollbar-thumb){ background: rgba(100,162,255,.45); border-radius: 8px; border: 1px solid rgba(100,162,255,.35) }
.career-life :deep(::-webkit-scrollbar-thumb:hover){ background: rgba(100,162,255,.65) }
</style>


